<template>
  <div class="participants-section">
    <div class="section-header">
      <div class="title">成员 ({{ students.length + 1 }})</div>
      <el-icon class="fullicon"><FullScreen /></el-icon>
    </div>
    <div class="participants-list">
      <div
        v-for="student in students"
        :key="student.id"
        class="participant-item"
      >
        <div class="video-container">
          <video
            v-if="student.videoEnabled && student.hasCamera"
            :ref="'student-' + student.id"
            autoplay
            :class="{ 'video-enabled': student.videoEnabled }"
          ></video>
          <div
            v-else
            class="placeholder"
            :class="{ 'no-device': !student.hasCamera }"
          >
            <img :src="student.avatar" :alt="student.name" />
            <span v-if="!student.hasCamera" class="no-device-text"
              >未检测到摄像头</span
            >
          </div>
        </div>
        <div class="participant-info">
          <div class="name-with-status">
            <span class="name">{{ student.name }}</span>
            <div
              class="mic-status"
              :class="{ 'mic-off': !student.audioEnabled }"
            >
              <el-icon :size="14">
                <component :is="student.audioEnabled ? 'Microphone' : 'Mute'" />
              </el-icon>
              <div class="volume-indicator" v-if="student.isSpeaking">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
          <div class="controls">
            <button
              :class="[
                'control-btn',
                student.audioEnabled ? 'active' : '',
                !student.hasMicrophone ? 'disabled' : '',
              ]"
              @click="toggleAudio(student.id)"
              :disabled="!student.hasMicrophone"
            >
              <el-icon :size="18">
                <component :is="student.audioEnabled ? 'Microphone' : 'Mute'" />
              </el-icon>
            </button>
            <button
              :class="[
                'control-btn',
                student.videoEnabled ? 'active' : '',
                !student.hasCamera ? 'disabled' : '',
              ]"
              @click="toggleVideo(student.id)"
              :disabled="!student.hasCamera"
            >
              <el-icon>
                <component
                  :is="student.videoEnabled ? VideoCamera : VideoPlay"
                />
              </el-icon>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { VideoCamera, VideoPlay } from "@element-plus/icons-vue";
defineProps({
  students: Array,
});
// 老师控制权限
const toggleAudio = (studentId) => {
  const student = students.value.find((s) => s.id === studentId);
  if (student && student.hasMicrophone) {
    student.audioEnabled = !student.audioEnabled;
    if (student.audioEnabled) {
      const simulateInterval = setInterval(() => {
        if (!student.audioEnabled) {
          clearInterval(simulateInterval);
          return;
        }
        if (Math.random() > 0.7) {
          simulateSpeaking(student.id);
        }
      }, 3000);
    }
    ElMessage.success(
      `${student.audioEnabled ? "开启" : "关闭"}了 ${student.name} 的麦克风`
    );
  } else {
    ElMessage.warning(`${student.name} 没有麦克风设备`);
  }
};

const toggleVideo = (studentId) => {
  const student = students.value.find((s) => s.id === studentId);
  if (student && student.hasCamera) {
    student.videoEnabled = !student.videoEnabled;
    // 这里添加实际的视频控制逻辑
    ElMessage.success(
      `${student.videoEnabled ? "开启" : "关闭"}了 ${student.name} 的摄像头`
    );
  } else {
    ElMessage.warning(`${student.name} 没有摄像头设备`);
  }
};

defineEmits(["showMenu", "toggleAudio", "toggleVideo"]);
</script>

<style lang="scss" scoped>
.participants-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;

  .participants-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;

    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
      }
    }

    // 仅在悬停时显示滚动条
    &:hover::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
    }

    &:not(:hover)::-webkit-scrollbar-thumb {
      background: transparent;
    }

    .participant-item {
      margin-bottom: 12px;
      background: #2b2b2b;
      border-radius: 8px;
      overflow: hidden;

      .video-container {
        width: 100%;
        aspect-ratio: 16/9;
        background: #1a1a1a;
        position: relative;

        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background: #1a1a1a;

          img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
          }

          .no-device-text {
            margin-top: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
          }
        }
      }

      .participant-info {
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name-with-status {
          display: flex;
          align-items: center;
          gap: 8px;

          .name {
            font-size: 14px;
            color: #fff;
            font-weight: 500;
          }

          .mic-status {
            display: flex;
            align-items: center;
            gap: 4px;

            .el-icon {
              font-size: 14px;
              color: #4080ff;

              &.is-muted {
                color: #ff4d4f;
              }
            }
          }
        }

        .controls {
          display: flex;
          gap: 6px;

          button {
            padding: 6px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s;

            &:hover:not(.disabled) {
              background: rgba(255, 255, 255, 0.2);
            }

            &.active {
              color: #4080ff;
              background: rgba(64, 128, 255, 0.1);
            }

            &.disabled {
              opacity: 0.5;
              cursor: not-allowed;
            }

            .el-icon {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
.participants-section {
  .section-header {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fullicon {
      cursor: pointer;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.9);
      &:hover {
        color: #4080ff;
      }
    }
    .title {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
  }
}
</style>
